<template>
  <div id="echart-container" ref="echartContainer"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "typicalCase",
  data() {
    return {
      option : {
      grid: {
        borderWidth:0,
        show:false,
        left: "7%",
        right: "7%",
        bottom: "5%",
        top: "17%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: ['2018','2019','2020','2021','2022','2023','2024'],
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        interval:5,
        mim:0,
        max:20,
        axisLine: {
            lineStyle: {
                opacity: 0.1
            }
        },
        splitLine: {
            lineStyle: {
                opacity: 0.1
            }
        }
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: this.getLegend(),
      series: [
        {
          data: [16, 19, 8, 13, 19,16,12],
          type: "bar",
          itemStyle:{
            color:"rgb(35,145,255)",
          },
          barWidth:15,
          label:{
            show:true,
            verticalAlign:'top',
            align:"center",
          },
          label:false,
        },
      ],
    },
    }
  },
  mounted() {
    const myChart = echarts.init(this.$refs.echartContainer);
    this.option && myChart.setOption(this.option);
  },
  methods:{
    getLegend(){
    return {
      icon: "rect",
      orient: "horizontal",
      left: "right",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: "#fff",
        fontSize: "12px",
      },
    };
  },
  }
};
</script>

<style scoped lang="scss">
#echart-container {
  width: 100%;
  height: 100%;
}
</style>
